<template>
  <div>
    <TopNav title="编辑资料" />
    <div class="imgWrapper">
      <van-uploader :after-read="afterRead">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt=""
          class="userPic"
        />
        <img v-else src="../../assets/default.png" alt="" class="userPic" />
      </van-uploader>
    </div>
    <ProfileBar
      label="昵称"
      :desc="userInfo.nickname"
      @click.native="isShowNickname = true"
    />
    <ProfileBar
      label="密码"
      desc="******"
      @click.native="isShowPassword = true"
    />
    <ProfileBar
      label="性别"
      :desc="userInfo.gender == 1 ? '小哥哥' : '小姐姐'"
      @click.native="isShowGender = true"
    />

    <!-- 昵称弹窗内容 -->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="setNickname"
    >
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>

    <!-- 密码弹窗内容 -->
    <van-dialog
      v-model="isShowPassword"
      title="修改密码"
      show-cancel-button
      @confirm="setPassword"
    >
      <van-field v-model="newPassword" placeholder="请输入新密码" />
    </van-dialog>

    <!-- 性别修改弹窗 -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="actions"
      @select="setGender"
      cancel-text="取消"
      description="请选择您的性别"
      close-on-click-action
    />
  </div>
</template>
<script>
import TopNav from "../../components/TopNav";
import ProfileBar from "../../components/ProfileBar";
export default {
  components: {
    TopNav,
    ProfileBar,
  },
  data() {
    return {
      userInfo: {},
      isShowNickname: false,
      newNickname: "",
      isShowPassword: false,
      newPassword: "",
      isShowGender: false,
      actions: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 },
      ],
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
      }).then((res) => {
        // console.log(res.data);
        this.userInfo = res.data.data;
        // console.log(this.userInfo);
      });
    },
    setNickname() {
      //   console.log(this.newNickname);
      const data = { nickname: this.newNickname };
      this.editProfile(data);
      this.newNickname = "";
    },
    setPassword() {
      //   console.log(this.newNickname);
      const data = { password: this.newPassword };
      this.editProfile(data);
      this.newPassword = "";
    },
    //因为昵称和密码的修改请求都基本相同只有data不一样，所以封装一起
    editProfile(data) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        data,
      }).then((res) => {
        console.log(res.data);
        const { data, message } = res.data;
        if (message == "修改成功") {
          this.getInfo();
        }
      });
    },
    setGender(action) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // console.log(action);
      const data = {
        gender: action.gender,
      };
      this.editProfile(data);
      this.getInfo();
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      // FormData异步上传二进制图片文件
      const fd = new FormData();
      fd.append("file", file.file);
      this.$axios({
        method: "post",
        url: "/upload",
        data: fd,
      }).then((res) => {
        // console.log(res.data);
        const { data, message } = res.data;
        if (message == "文件上传成功") {
          const newData = {
            head_img: data.url,
          };
          this.editProfile(newData);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.imgWrapper {
  display: flex;
  height: 150/360 * 100vw;
  align-items: center;
  justify-content: center;
  .userPic {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    border-radius: 50%;
    object-fit: over;
  }
}
</style>